<template>
  <Form class="xtx-form" :validation-schema='veeValidateSchema' ref="formCom" v-slot='{errors}' >
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <Field class="input" name='accountApi' v-model="form.account" type="text" placeholder="请输入用户名" :class="{err:errors.accountApi}" />
      </div>
      <div class="error">{{errors.accountApi}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field class="input" name='mobile' v-model="form.mobile" :class="{err:errors.mobile}" type="text" placeholder="请输入手机号" />
      </div>
      <div class="error">{{errors.mobile}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field class="input" name='code' v-model="form.code" :class="{err:errors.code}" type="text" placeholder="请输入验证码" />
        <span class="code" @click="sendCode">{{time!=0?time:'发送验证码'}}</span>
      </div>
      <div class="error">{{errors.code}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field class="input" name='password' type="password" v-model="form.password" :class="{err:errors.password}" placeholder="请输入密码" />
      </div>
      <div class="error">{{errors.password}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field class="input" name='rePassword' v-model="form.repassword" :class="{err:errors.rePassword}" type="password" placeholder="请确认密码" />
      </div>
      <div class="error">{{errors.rePassword}}</div>
    </div>
    <a href="javascript:;" class="submit" @click="btoSubmit">立即提交</a>
  </Form>
</template>

<script>
import { userQQPatchCode, userQQPatchLogin } from '@/api/login'
import { Field, Form } from 'vee-validate'
import veeValidateSchema from '@/utils/vee-validate-schema'
import { useIntervalFn } from '@vueuse/core'
import { ref, inject } from 'vue'
import Message from '@/components/library/Message'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  components: {
    Field, Form
  },
  name: 'CallbackPatch',
  setup () {
    const store = useStore()
    const router = useRouter()
    const formCom = ref(null)
    // 收集数据
    const form = ref({
      account: '',
      mobile: '',
      code: '',
      password: '',
      repassword: ''
    })

    // 计时器 pause是停止，resume是开始
    const time = ref(0)
    const { resume, pause } = useIntervalFn(() => {
      time.value--
      if (time.value === 0) {
        pause()
      }
    }, 100, { immediate: false })

    // 点击发送验证码触发
    const sendCode = async () => {
      const mobilebool = veeValidateSchema.mobile(form.value.mobile)
      const accountbool = await veeValidateSchema.accountApi(form.value.account)
      console.log(mobilebool, accountbool)
      if (mobilebool === true && accountbool === true) {
        try {
          console.log('12345,上山打老虎')
          userQQPatchCode(form.value.mobile)
          time.value = 60
          resume()
        } catch (error) {
          Message('warn', error.response.data.message)
        }
      }
    }

    // 用inject获取父组件用provide传过来的数据
    const qqinfo = inject('qqUserInfo')
    console.log(qqinfo)

    // 点击提交触发
    const btoSubmit = async () => {
      const formbool = await formCom.value.validate()
      console.log(formbool)
      if (formbool) {
        try {
          const { result } = await userQQPatchLogin({ unionId: qqinfo.value.openId, mobile: form.value.mobile, code: form.value.code, account: form.value.account, password: form.value.password })
          console.log(result)
          store.commit('setUser', result)
          router.push(store.state.user.url)
        } catch (error) {
          console.log(error)
          Message('warn', error.response.data.message)
        }
      }
    }
    return { veeValidateSchema, form, sendCode, time, btoSubmit, formCom }
  }
}
</script>

<style scoped lang='less'>
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
